<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item label="SKU">
            <el-input maxlength="50" show-word-limit v-model="formInline.productSpecCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.productname')">
            <el-input maxlength="200" show-word-limit v-model="formInline.productName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="classname" :label="$t('m.type')"></el-table-column>
      <el-table-column align="center" prop="code" :label="$t('m.stock.code')"></el-table-column>
      <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
      <el-table-column align="center" prop="productname" :label="$t('m.in.productname')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="warehousename" :label="$t('m.page.warehouse')"></el-table-column>
      <el-table-column
        align="center"
        prop="placeholderstock"
        :label="$t('m.stock.placeholder')"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="orignholderstock"
        :label="$t('m.stock.orignholderstock')"
      ></el-table-column>
      <el-table-column align="center" prop="modifier" :label="$t('m.stock.creator')"></el-table-column>
      <el-table-column align="center" prop="modifydate" :label="$t('m.stock.createdate')">
        <template slot-scope="scope">{{scope.row.modifydate|dateFilter}}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChange"
      @size-change="handleSizeChange">
    </el-pagination>
    <!-- table数据展示 end -->
  </div>
</template>
<script>
export default {
  name:'placeHolderStock',
  data(){
    return {
      formInline:{
        productSpecCode:'', // sku
        productName:'' // 产品名称
      },

      tableData:[]
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let warehouseId = this.$store.state.basicInfo.warehouseInfo.id
      let data = Object.assign({}, this.formInline, {pageIndex:this.page,pageSize:this.rowSize,warehouseId})

      let options = {
        withCredentials:false,
        method:'post',
        url:`${window._config_.stockUrl}/api/PlaceHolderStock/GetPlaceHolderStockList`,
        data
      }
      this.tableLoading = true
      this.$axios(options).then(({ data,count }) => {
        this.tableData = data
        this.totalRows = count
        setTimeout(()=>this.tableLoading=false,500)
        if (!this.tableData.length)
          return this.callbackMessage(this.$t('m.nodata'))
        this.tableData = this.tableData.map(item => {
          if (!item.modifier) item.modifier = '---'
          return item
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>